<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>jQuery数字滚动播放动画特效 - 站长素材</title>

		<link rel="stylesheet" type="text/css" href="css/zzsc.css">
		<!--<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>-->
		<style type="text/css">
			.container {
				margin: 150px auto;
				max-width: 480px;
			}
			
			h2,
			h3 {
				text-align: center;
			}
			
			.demo {
				text-align: center;
				margin-top: 1000px;
			}
			
			span.counter {
				display: block;
				margin: 20px auto;
				font-size: 64px;
				font-family: 'Pacifico'
			}
		</style>

	</head>

	<body>
		<div class="container">
			<!--<h2>jQuery数字滚动播放动画特效</h2>
			<h3>向下滚动页面 ↓</h3>-->
			<div class="demo">
				<!--<span class="counter">1,498,547.00</span>-->
				<span class="counter">99999.99</span>
				<!--<span class="counter">1234567</span>-->
			</div>
		</div>

		<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script src="js/jquery.waypoints.min.js"></script>
		<script type="text/javascript" src="js/jquery.countup.min.js"></script>
		<script type="text/javascript">
			$('.counter').countUp({
				delay: 20,
				time: 2000
			});
		</script>

	</body>

</html>